<template>
    <div>
        <div style="height: 50px;">
            <el-button round @click="AddShip()">保存</el-button>
        </div>
        <!-- 添加 -->
        <span style="">发货申请</span>
        <table border="1"
            style="border-collapse: collapse; width: 100%; height: 30px;margin-top: 30px;margin-bottom: 30px;color:black">
            <tr>
                <td :colspan="8" style="height: 50px; font-size: 20px;">基本信息</td>
            </tr>
            <tr style="height: 70px;">
                <td>
                    <el-form ref="ruleFormRef" :model="form" label-width="120px" class="demo-ruleForm" size="small"
                        style="margin-top: 10px;">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="单据主题" prop="inspectionTheme">
                                    <el-input v-model="form.sprTopic" style="width:200px ;" size="large" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="单据编号" prop="inspectionNumber">
                                    <el-input v-model="form.sraNumber" placeholder="保存后自动生成" style="width:200px ;"
                                        size="large" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="发货类别" prop="purchaseContract">
                                    <el-select v-model="form.shipType" style="width: 200px;" size="large"
                                        placeholder="发货类别">
                                        <el-option label="销售发货" :value="0" />
                                        <el-option label="采购退货" :value="1" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="申请人" prop="supplierName">
                                    <el-input v-model="form.sraApplicant" style="width:200px ;" size="large"
                                        @dblclick="App" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="应发日期" prop="inspectionTheme">
                                    <el-date-picker v-model="form.sraDueDate" type="date" placeholder="选择日期"
                                        format="YYYY/MM/DD" value-format="YYYY-MM-DD" size="large" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="客户/供应商" prop="inspectionNumber">
                                    <el-input style="width:200px ;" size="large" placeholder="双击选择" v-model="form.name"
                                        @dblclick="sale" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="收货人" prop="supplierName">
                                    <el-input v-model="form.sraReceivPeople" style="width:200px ;" size="large" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="收货地址" prop="inspectionTheme">

                                    <el-input v-model="form.sraReceivAddress" style="width:200px ;" size="large" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="联系方式" prop="inspectionNumber">
                                    <el-input style="width:200px ;" size="large" v-model="form.sraReceivePhone"
                                        @dblclick="sale" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </td>
            </tr>
        </table>

        <!-- 寄件人信息 -->
        <table border="1"
            style="border-collapse: collapse; width: 100%; height: 30px;margin-top: 30px;margin-bottom: 30px;color:black">
            <tr>
                <td :colspan="8" style="height: 50px; font-size: 20px;">发货信息</td>
            </tr>
            <tr style="height: 70px;">
                <td>
                    <el-form ref="ruleFormRef" :model="form" label-width="120px" class="demo-ruleForm" size="small"
                        style="margin-top: 10px;">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="发货人" prop="inspectionTheme">
                                    <el-input v-model="form.sraConsigner" style="width:200px ;" size="large"
                                        @click="openDialog" placeholder="双击选择" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="交货日期" prop="inspectionNumber">
                                    <el-date-picker v-model="form.sraDeliveryDate" type="date" placeholder="选择日期"
                                        value-format="YYYY-MM-DD" size="large" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="发货方式" prop="purchaseContract">
                                    <el-select v-model="form.sraShipmentsType" style="width: 200px;" size="large">
                                        <el-option value="">请选择</el-option>
                                        <el-option value="整车运输">整车运输</el-option>
                                        <el-option value="邮政EMS">邮政EMS</el-option>
                                        <el-option value="航空快运">航空快运</el-option>
                                        <el-option value="中铁快运">中铁快运</el-option>
                                        <el-option value="货站托运">货站托运</el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="快递公司" prop="supplierName">
                                    <el-select v-model=form.sraCourierCompanie style="width: 200px;" size="large">
                                        <el-option value="">请选择</el-option>
                                        <el-option value="顺丰快递">顺丰快递</el-option>
                                        <el-option value="邮政EMS">邮政EMS</el-option>
                                        <el-option value="中通速运">中通速运</el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="快递单号" prop="inspectionTheme">
                                    <el-input v-model="form.sraTrackingNumber" placeholder="请输入快递单号"
                                        style="width: 200px;" size="large"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="快递费用" prop="inspectionNumber">
                                    <el-input style="width:200px ;" size="large" v-model="form.sraCourierCharges" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="备注" prop="supplierName">
                                    <el-input v-model="form.sraRemark" type="textarea" style="width:200px ;"
                                        size="large" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </td>
            </tr>
        </table>


        <!-- 产品表格 -->
        <table border="1" style="border-collapse: collapse; width: 100%; height: 40px;color:black">
            <thead>
                <tr>
                    <th><input type="checkbox" v-model="selectAll" @change="toggleSelectAll" style="width: 30px;" />
                    </th>
                    <th style="height: 40px;">序号</th>
                    <th>产品名称</th>
                    <th>产品编号</th>
                    <th>规格</th>
                    <th>单位</th>
                    <th>数量</th>
                    <th>包装方式</th>
                    <th>备注</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in check" :key="index">
                    <td><input type="checkbox" style="width: 30px;width: 100%;" @click="selectItem" />
                    </td>
                    <td style=" text-align: center;">{{ index + 1 }}</td>
                    <td><input v-model="item.pName" type="text" style="height: 40px; width: 100%;text-align: center;" />
                    </td>
                    <td><input v-model="item.pNumber" type="text" style="height: 40px;width: 100%;text-align: center;"
                            :disabled="true" /></td>
                    <td><input v-model="item.pSpec" type="text" style="height: 40px;width: 100%;text-align: center;"
                            :disabled="true" />
                    </td>
                    <td><input v-model="item.pUnit" type="text" style="height: 40px;width: 100%;text-align: center;" />

                    </td>
                    <td><input v-model="form.proNum" type="text" style="height: 40px;width: 100%;text-align: center;" />

                    </td>
                    <td><el-select style="width: 100px;" v-model="form.packMethod">
                            <el-option value="纸箱包装">纸箱包装</el-option>
                            <el-option value="塑料包装">塑料包装</el-option>
                            <el-option value="常规包装">常规包装</el-option>
                            <el-option value="其他">其他</el-option>
                        </el-select>
                    </td>
                    <td><input v-model="form.remark" type="text" style="height: 40px;width: 100%;text-align: center;"
                            @dblclick="dialogVisible1 = true" />
                    </td>
                </tr>
            </tbody>
        </table>


        <!-- 申请人员弹框 -->
        <el-dialog v-model="dialogVisible" title="申请人" width="1000" style="height: 700px;color:black">

            <template #footer>
                <el-row>
                    <el-col :span="4">
                        <el-tree style="max-width: 600px" :data="sectorlist" default-expand-all="true"
                            @node-click="handleNodeClick2" />
                    </el-col>
                    <el-col :span="20">
                        <el-table :data="manpowerList" style="width:100%" @selection-change="handleSelectionChange2">
                            <el-table-column type="selection" width="55" />
                            <el-table-column type="index" label="序号" align="center" />
                            <el-table-column prop="mName" label="姓名" align="center" />
                            <el-table-column prop="sectorName" label="部门" align="center" />
                            <el-table-column prop="postName" label="岗位" align="center" />
                        </el-table>
                    </el-col>
                </el-row>
                <el-button type="primary" @click="dialogVisible = false">
                    保存
                </el-button>
            </template>
        </el-dialog>

        <!-- 发货人员弹框 -->
        <el-dialog v-model="dialogVisible3" title="发货人" width="1000" style="height: 700px;color:black"
            :before-close="handleClose">
            <span></span>
            <template #footer>
                <el-row>
                    <el-col :span="4">
                        <el-tree style="max-width: 600px" :data="sectorlist" default-expand-all="true"
                            @node-click="handleNodeClick2" />
                    </el-col>
                    <el-col :span="20">
                        <el-table :data="manpowerList" style="width:100%" @selection-change="handleSelectionChange3">
                            <el-table-column type="selection" width="55" />
                            <el-table-column type="index" label="序号" align="center" />
                            <el-table-column prop="mName" label="姓名" align="center" />
                            <el-table-column prop="sectorName" label="部门" align="center" />
                            <el-table-column prop="postName" label="岗位" align="center" />
                        </el-table>
                    </el-col>
                </el-row>
                <el-button type="primary" @click="dialogVisible3 = false">
                    保存
                </el-button>
            </template>
        </el-dialog>

        <!-- 销售合同弹框 -->
        <el-dialog v-model="dialogVisible2" title="销售合同" width="1000" style="height: 400px;color:black">
            <span></span>
            <template #footer>
                <el-table :data="showGet" border style="width: 100%" @selection-change="SaleSelection">
                    <el-table-column type="selection" width="55px" />
                    <el-table-column type="index" label="序号" width="55px" />
                    <el-table-column prop="sCcontractNumber" label="合同编号" width="180" />
                    <el-table-column prop="contractTopic" label="合同主题" width="180" />
                    <el-table-column prop="relevancyIName" label="关联项目" width="180" />
                    <el-table-column prop="clientName" label="客户名称" width="180" />
                    <el-table-column prop="scAgencyDate" label="签约日期" width="180" />
                    <el-table-column prop="scNum" label="数量合计" />
                    <el-table-column prop="scSalespeople" label="销售人员" width="180" />
                    <el-table-column prop="scTax" label="税额合计" width="180" />
                    <el-table-column prop="sCcontractPrice" label="合同总额" width="180" />
                    <el-table-column prop="scPreferentialPrice" label="优惠额度" width="180" />
                    <el-table-column prop="preferentialPrice" label="优惠后总额" width="180" />
                    <el-table-column label="操作" width="180" />
                </el-table>
                <el-button type="primary" @click="dialogVisible2 = false">
                    保存
                </el-button>
            </template>
        </el-dialog>

        <!-- 采购退货弹框 -->
        <el-dialog v-model="dialogVisible1" title="采购退货" width="1000" style="height: 600px;color:black">
            <span></span>
            <template #footer>
                <!-- 显示列表 -->
                <div style="font-weight: bold; font-size: 25px; text-align: center;">采购退货列表</div>
                <el-table :data="PurchaseReturnlist" style="width: 100%" @selection-change="handleSelectionChange1">
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" label="序号" align="center" />
                    <el-table-column prop="purchaseReturnsCode" label="采购退货编号" align="center" />
                    <el-table-column prop="purchaseReturnsTopic" label="采购退货主题" align="center" />
                    <el-table-column prop="vName" label="供应商名称" align="center">
                        <template v-slot="scope">
                            <a @click="vender(scope.row.vendorId)">{{ scope.row.vName }}</a>
                        </template>
                    </el-table-column>
                    <el-table-column prop="prReturnType" label="退货类别" align="center" />
                    <el-table-column prop="rpNum" label="退货数量" align="center" />
                    <el-table-column prop="rpPrice" label="退货金额" align="center" />
                    <el-table-column prop="prShipmentState" label="发货状态" align="center">
                        <template v-slot="scope">
                            {{ scope.row.prShipmentState == 0 ? '无需发货' : scope.row.prShipmentState == 1 ? '待发货' :
                                scope.row.prShipmentState == 2 ? '发货完毕' : '部分发货' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="pReturnsPersonnel" label="退货人员" align="center" />
                    <el-table-column prop="prReturnDate" label="退货日期" align="center">
                        <template v-slot="scope">
                            {{ scope.row.prReturnDate.substring(0, 10) }}
                        </template>
                    </el-table-column>
                </el-table>
                <el-button type="primary" @click="dialogVisible1 = false">
                    保存
                </el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
import http from '../../../http.js'


const form = reactive({

    "shippRequestAppId": 0,
    "sraNumber": "",
    "sprTopic": "",
    "sraDueDate": "",
    "sraApplicant": "",
    "shipType": 0,
    "returnProductId": 0,
    "saleContractProductId": 0,
    "clientId": 0,
    "vendorId": 0,
    name: '',
    "sraReceivPeople": "",
    "sraReceivAddress": "",
    "sraReceivePhone": "",
    "manpowerId": 0,
    "sraConsigner": "",
    "sraDeliveryDate": "",
    "sraShipmentsType": "",
    "sraCourierCompanie": "",
    "sraTrackingNumber": "",
    "sraCourierCharges": 0,
    "sraRemark": "",
    "addName": "",
    "addTime": "",
    "office_Id": "",
    "user_Id": 0,
    "detail": [
        {
            "shipProductAppId": 0,
            "sraNumber": "",
            "productId": 0,
            "pName": "string",
            "pNumber": "string",
            "pSpec": "string",
            "pUnit": "string",
            "proNum": 0,
            "packMethod": "",
            "remark": "",
            "addName": "",
            "addTime": "",
            "office_Id": "",
            "user_Id": 0
        }
    ]

})


const dialogVisible = ref(false)
const dialogVisible1 = ref(false)
const dialogVisible2 = ref(false)
const dialogVisible3 = ref(false)
const handleClose = () => {
    dialogVisible3.value = false
}


const sale = () => {
    if (form.shipType == 0) {
        dialogVisible2.value = true
        Show()
    }
    if (form.shipType == 1) {
        dialogVisible1.value = true
        GetPurchaseReturnList()
    }
}

const check = ref([])

//#region  销售合同

const pagesale = reactive({
    PageIndex: 1,
    PageSize: 10,
    totalCount: 0,
    pageCount: 0
})
var showGet = ref([])
const Show = () => {
    axios.get(http.zblnb + '/cw/api/SaleContract/ShowStateSalesReturn', {
        params: {
            PageIndex: pagesale.PageIndex,
            PageSize: pagesale.PageSize,
        }
    }).then((res) => {
        if (res.data.code == 200) {
            console.log(res.data.data)
            showGet.value = res.data.data.list
            pagesale.totalCount = res.data.data.lcount
            pagesale.pageCount = res.data.data.pcount

        }
    })
}

var ids = ref([])
const SaleSelection = (val: any) => {
    ids.value = val
    ids.value.forEach(item => {
        form.name = item.clientName
        form.sraReceivePhone = item.scRePhone
        form.sraReceivAddress = item.scAddress
        form.sraReceivPeople = item.scCountpartPeople
        form.saleContractProductId = item.saleContractId
        check.value = item.saleContractProductDto;


    })

    check.value.forEach(ele => {
        form.proNum = ele.scpNum
    })
    console.log(check.value);


}



//#endregion


//#region  采购退货


//查询条件
const PurchaseShow = reactive({
    purchaseReturnsId: "",
    PurchaseReturnsCode: "",
    PurchaseReturnsTopic: "",
    Pstart: "",
    Pend: "",
    PROutboundProgress: "",
    PRShipmentState: "",
    VName: ""
})

//分页
const Page = reactive({
    Pindex: 1,
    Psize: 10,
    lcount: 0,
    pcount: 0
})
//显示列表
const PurchaseReturnlist = ref([])
const GetPurchaseReturnList = () => {
    axios.get(http.zblnb + '/cg/api/ProcurementReturn/GetProcurementReturnList', {
        params: {
            Pindex: Page.Pindex || 0,
            Psize: Page.Psize || 0,
            PurchaseReturnsCode: PurchaseShow.PurchaseReturnsCode || '',
            PurchaseReturnsTopic: PurchaseShow.PurchaseReturnsTopic || '',
            Pstart: PurchaseShow.Pstart || '',
            Pend: PurchaseShow.Pend || '',
            PROutboundProgress: PurchaseShow.PROutboundProgress,
            PRShipmentState: PurchaseShow.PRShipmentState,
            VName: PurchaseShow.VName || '',
        }
    })
        .then(res => {
            console.log(res.data.data)
            PurchaseReturnlist.value = res.data.data.list;
            Page.lcount = res.data.data.lcount;
            Page.pcount = res.data.data.pcount;
        })
}
//多选框
const checkReturn = ref([])
const handleSelectionChange1 = (val: User[]) => {
    checkReturn.value = val
    check.value = val;
    form.name = val[0].vName
    form.vendorId = val[0].vendorId
    form.vendorId = val[0].vendorId
    form.productId = val[0].productId
    form.returnProductId = val[0].returnProductId
    form.proNum = val[0].rpNum
    console.log(form.proNum)
}


//#endregion


//#region  发货人

const openDialog = () => {
    dialogVisible3.value = true
    GetSectorList()
    GetManpowerList()
}
const App = () => {
    dialogVisible.value = true
    GetSectorList()
    GetManpowerList()
}
//查询条件
const wform = reactive({
    MName: "",
    Mstart: "",
    Mend: "",
    Bstart: "",
    Bend: "",
    SectorId: "",
    PostId: ""
})

//分页
const wPage = reactive({
    Pindex: 1,
    Psize: 10,
    pcount: 0,
    lcount: 0
})

//部门
const sectorlist = ref([])
const GetSectorList = () => {
    axios.get(http.zblnb + '/vendor/api/Post/GetSectorList')
        .then(res => {
            sectorlist.value = res.data.data;
            console.log(sectorlist.value)
        })
}

//树形
const handleNodeClick2 = (data: Tree) => {
    console.log(data)
    wform.SectorId = data.value
    GetManpowerList();
}

//显示人员档案
const manpowerList = ref([])
const GetManpowerList = () => {
    axios.get(http.zblnb + '/vendor/api/Manpower/GetManpowerList', {
        params: {
            Pindex: wPage.Pindex,
            Psize: wPage.Psize,
            MName: wform.MName || "",
            Mstart: wform.Mstart || "",
            Mend: wform.Mend || "",
            Bstart: wform.Bstart || "",
            Bend: wform.Bend || "",
            SectorId: wform.SectorId || "",
            PostId: wform.PostId || "",
        }
    })
        .then(res => {
            manpowerList.value = res.data.data.list
            wPage.lcount = res.data.data.lcount;
            wPage.pcount = res.data.data.pcount;
            console.log(res.data.data)
        })
}


//多选框
const check2 = ref([])
const handleSelectionChange2 = (val: any) => {
    check2.value = val
    form.sraApplicant = check2.value[0].mName
    form.manpowerId = check2.value[0].manpowerId

    console.log(form.manpowerId)
}
const check3 = ref([])
const handleSelectionChange3 = (val: any) => {
    check3.value = val
    console.log(check3.value)
    form.sraConsigner = check3.value[0].mName

}

//#endregion

//获取复选框产品列表
const selectAll = ref([])
const idAll = ref([])
const selectItem = () => {
    if (idAll.value) {
        selectAll.value = check.value.filter(item => item.productId);
    }
    console.log(selectAll.value)
}


//反填
const BackFill = () => {
    axios.get(http.zblnb + "/erpck/api/Ship/BackFillSHip?shipid=" + route.query.id).then(res => {
        console.log(res.data.data);
        var d = res.data.data;
        check.value = res.data.data.detail
        check.value.forEach(item => {
            console.log(item)
            form.proNum = item.proNum
            form.packMethod = item.packMethod
            form.remark = item.remark
            form.shipProductAppId = item.shipProductAppId
            console.log(form.shipProductAppId)
        })
        form.shippRequestAppId = d.shippRequestAppId
        form.sraNumber = d.sraNumber
        form.sprTopic = d.sprTopic
        form.sraDueDate = d.sraDueDate
        form.sraApplicant = d.sraApplicant
        form.manpowerId = d.manpowerId
        form.sraConsigner = d.sraConsigner
        form.shipType = d.shipType
        form.returnProductId = d.returnProductId
        form.saleContractProductId = d.saleContractProductId
        form.clientId = d.clientId
        form.vendorId = d.vendorId
        form.name = d.name
        form.sraReceivPeople = d.sraReceivPeople
        form.sraReceivAddress = d.sraReceivAddress
        form.sraReceivePhone = d.sraReceivePhone
        form.sraDeliveryDate = d.sraDeliveryDate
        form.sraShipmentsType = d.sraShipmentsType
        form.sraCourierCompanie = d.sraCourierCompanie
        form.sraTrackingNumber = d.sraTrackingNumber
        form.sraCourierCharges = d.sraCourierCharges
        form.sraRemark = d.sraRemark
        form.addName = d.addName
        form.addTime = d.addTime
        form.office_Id = d.office_Id
        form.user_Id = d.user_Id



    }).catch(err => {

    })
}






//修改
const AddShip = () => {

    var model = {
        "shippRequestAppId": form.shippRequestAppId,
        "sraNumber": form.sraNumber,
        "sprTopic": form.sprTopic,
        "sraDueDate": form.sraDueDate,
        "sraApplicant": form.sraApplicant,
        "shipType": form.shipType,
        "returnProductId": form.returnProductId,
        "saleContractProductId": form.saleContractProductId,
        "clientId": form.clientId,
        "vendorId": form.vendorId,
        name: form.name,
        "sraReceivPeople": form.sraReceivPeople,
        "sraReceivAddress": form.sraReceivAddress,
        "sraReceivePhone": form.sraReceivePhone,
        "manpowerId": form.manpowerId,
        "sraConsigner": form.sraConsigner,
        "sraDeliveryDate": form.sraDeliveryDate,
        "sraShipmentsType": form.sraShipmentsType,
        "sraCourierCompanie": form.sraCourierCompanie,
        "sraTrackingNumber": form.sraTrackingNumber,
        "sraCourierCharges": Number(form.sraCourierCharges),
        "sraRemark": form.sraRemark,
        "addName": form.addName,
        "addTime": form.addTime,
        "office_Id": form.office_Id,
        "user_Id": form.user_Id,
        "detail": selectAll.value.map(ele => ({

            "productId": ele.productId,
            "packMethod": form.packMethod,
            "remark": form.remark,
            "pName": ele.pName,
            "pNumber": ele.pNumber,
            "pSpec": ele.pSpec,
            "pUnit": ele.pUnit,
            "proNum": form.proNum,

        }))


    }
    console.log(model)

    axios.post(http.zblnb + "/erpck/api/Ship/UptShip", model).then(res => {
        if (res.data.code == 200) {
            ElMessage.success("修改成功")
            router.push('/ShowShipList')
        }
        else {
            ElMessage.error("修改失败")
        }
    })
}


onMounted(() => {
    BackFill()
})


</script>

<style scoped></style>